<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<!DOCTYPE html>
<html>
<head>
    <title>投注记录列表</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.7.2/font/bootstrap-icons.css">
    <style>
        :root {
            --primary-color: #4f46e5;
            --secondary-color: #6366f1;
            --success-color: #22c55e;
            --danger-color: #ef4444;
            --warning-color: #f59e0b;
            --info-color: #3b82f6;
        }

        body {
            background-color: #f9fafb;
            color: #1f2937;
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
        }

        .container {
            max-width: 1400px;
            padding: 2rem;
        }

        /* Card Styles */
        .card {
            border: none;
            border-radius: 1rem;
            box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
            background: white;
        }

        .card-body {
            padding: 1.5rem;
        }

        .card-title {
            color: #111827;
            font-weight: 600;
            font-size: 1.25rem;
        }

        /* Table Styles */
        .table {
            font-size: 0.925rem;
            margin-bottom: 0;
            vertical-align: middle;
        }

        .table th {
            background-color: #f8fafc;
            color: #4b5563;
            font-weight: 600;
            text-transform: uppercase;
            font-size: 0.75rem;
            letter-spacing: 0.05em;
            padding: 1rem;
            border-bottom: 1px solid #e5e7eb;
            white-space: nowrap;
        }

        .table td {
            padding: 1rem;
            color: #374151;
            border-bottom: 1px solid #e5e7eb;
            vertical-align: middle;
        }

        .table-hover tbody tr:hover {
            background-color: #f8fafc;
            transition: all 0.2s ease;
        }

        /* Button Styles */
        .btn {
            padding: 0.5rem 1rem;
            font-weight: 500;
            border-radius: 0.5rem;
            transition: all 0.2s ease;
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
        }

        .btn i {
            font-size: 1.1em;
        }

        .btn-primary {
            background-color: var(--primary-color);
            border-color: var(--primary-color);
        }

        .btn-primary:hover {
            background-color: var(--secondary-color);
            border-color: var(--secondary-color);
        }

        .btn-info {
            background-color: var(--info-color);
            border-color: var(--info-color);
            color: white;
        }

        .btn-info:hover {
            background-color: #2563eb;
            border-color: #2563eb;
            color: white;
        }

        .btn-success {
            background-color: var(--success-color);
            border-color: var(--success-color);
        }

        .btn-warning {
            background-color: var(--warning-color);
            border-color: var(--warning-color);
            color: white;
        }

        .btn-danger {
            background-color: var(--danger-color);
            border-color: var(--danger-color);
        }

        .btn-sm {
            padding: 0.375rem 0.75rem;
            font-size: 0.875rem;
        }

        /* Status Badge Styles */
        .status-badge {
            padding: 0.375rem 0.75rem;
            font-size: 0.875rem;
            border-radius: 9999px;
            font-weight: 500;
            display: inline-flex;
            align-items: center;
            gap: 0.375rem;
        }

        .status-unsettled {
            background-color: #fef3c7;
            color: #92400e;
        }

        /* Result Badge Styles */
        .result-badge {
            padding: 0.375rem 0.75rem;
            border-radius: 9999px;
            font-size: 0.875rem;
            font-weight: 500;
            display: inline-flex;
            align-items: center;
            gap: 0.375rem;
        }

        .result-win {
            background-color: #fee2e2;
            color: #991b1b;
        }

        .result-half-win {
            background-color: #ecfccb;
            color: #3f6212;
        }

        .result-lose {
            background-color: #dcfce7;
            color: #166534;
        }

        .result-half-lose {
            background-color: #fff7ed;
            color: #9a3412;
        }

        .result-draw {
            background-color: #f3f4f6;
            color: #374151;
        }

        /* Amount Styles */
        .result-positive {
            color: var(--danger-color) !important;
            font-weight: 600;
        }

        .result-negative {
            color: var(--success-color) !important;
            font-weight: 600;
        }

        /* Pagination Styles */
        .pagination {
            margin: 0;
            gap: 0.25rem;
        }

        .page-link {
            border: none;
            padding: 0.5rem 0.75rem;
            min-width: 2.5rem;
            height: 2.5rem;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #4b5563;
            border-radius: 0.5rem !important;
            margin: 0;
            font-weight: 500;
        }

        .page-item.active .page-link {
            background-color: var(--primary-color);
            color: white;
        }

        .page-item.disabled .page-link {
            background-color: #f3f4f6;
            color: #9ca3af;
        }

        /* Header Section */
        .page-header {
            margin-bottom: 2rem;
        }

        .page-header h2 {
            font-weight: 600;
            color: #111827;
            font-size: 1.875rem;
        }

        /* Action Buttons Group */
        .action-buttons {
            display: flex;
            gap: 0.75rem;
            align-items: center;
        }

        /* Table Container */
        .table-container {
            background: white;
            border-radius: 1rem;
            box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
            overflow: hidden;
        }

        /* Responsive Design */
        @media (max-width: 768px) {
            .container {
                padding: 1rem;
            }
            
            .action-buttons {
                flex-wrap: wrap;
            }
            
            .table-responsive {
                margin: 0 -1rem;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="page-header d-flex justify-content-between align-items-center">
            <h2>投注记录列表</h2>
            <div class="action-buttons">
                <a href="${pageContext.request.contextPath}/bet/add" class="btn btn-primary">
                    <i class="bi bi-plus-lg"></i> 新增记录
                </a>
                <a href="${pageContext.request.contextPath}/bet/stats" class="btn btn-info">
                    <i class="bi bi-graph-up"></i> 统计分析
                </a>
                <a href="${pageContext.request.contextPath}/bet/streak" class="btn btn-info">
                    <i class="bi bi-lightning-charge"></i> 连胜统计
                </a>
                <a href="${pageContext.request.contextPath}/export/excel" class="btn btn-success">
                    <i class="bi bi-file-earmark-excel"></i> 导出Excel
                </a>
            </div>
        </div>
        
        <div class="card mb-4">
            <div class="card-body">
                <h5 class="card-title d-flex align-items-center gap-2">
                    <i class="bi bi-hourglass-split text-warning"></i>
                    未结算投注记录
                </h5>
            </div>
        </div>
        
        <div class="table-container">
            <div class="table-responsive">
                <table class="table table-hover">
                    <thead>
                        <tr>
                            <th>时间</th>
                            <th>联赛</th>
                            <th>主队</th>
                            <th>客队</th>
                            <th>比分</th>
                            <th>类型</th>
                            <th>盘口</th>
                            <th>水位</th>
                            <th class="text-end">投注金额</th>
                            <th class="text-end">结果金额</th>
                            <th class="text-center">比赛结果</th>
                            <th class="text-end">操作</th>
                        </tr>
                    </thead>
                    <tbody>
                        <c:forEach items="${page.records}" var="record">
                            <tr>
                                <td>${record.betTimeStr}</td>
                                <td>${record.leagueName}</td>
                                <td>${record.homeTeam}</td>
                                <td>${record.awayTeam}</td>
                                <td class="text-center">
                                    <c:choose>
                                        <c:when test="${record.homeScore != null && record.awayScore != null}">
                                            ${record.homeScore} - ${record.awayScore}
                                        </c:when>
                                        <c:otherwise>
                                            -
                                        </c:otherwise>
                                    </c:choose>
                                </td>
                                <td>${record.betType}</td>
                                <td>
                                    <c:if test="${record.betType == '让球'}">
                                        <c:choose>
                                            <c:when test="${record.handicapTeam == 'HOME'}">主队</c:when>
                                            <c:when test="${record.handicapTeam == 'AWAY'}">客队</c:when>
                                        </c:choose>
                                    </c:if>
                                    ${record.handicapValue}
                                </td>
                                <td>${record.odds}</td>
                                <td class="text-end">${record.betAmount}</td>
                                <td class="text-end ${record.resultAmount != null ? (record.resultAmount > 0 ? 'result-positive' : 'result-negative') : ''}">
                                    ${record.resultAmount}
                                </td>
                                <td class="text-center">
                                    <c:choose>
                                        <c:when test="${empty record.betResult}">
                                            <span class="status-badge status-unsettled">
                                                <i class="bi bi-hourglass-split"></i>
                                                未结算
                                            </span>
                                        </c:when>
                                        <c:otherwise>
                                            <span class="result-badge 
                                                <c:choose>
                                                    <c:when test="${record.betResult == 'WIN'}">result-win</c:when>
                                                    <c:when test="${record.betResult == 'HALF_WIN'}">result-half-win</c:when>
                                                    <c:when test="${record.betResult == 'LOSE'}">result-lose</c:when>
                                                    <c:when test="${record.betResult == 'HALF_LOSE'}">result-half-lose</c:when>
                                                    <c:otherwise>result-draw</c:otherwise>
                                                </c:choose>">
                                                <i class="bi 
                                                    <c:choose>
                                                        <c:when test="${record.betResult == 'WIN'}">bi-trophy-fill</c:when>
                                                        <c:when test="${record.betResult == 'HALF_WIN'}">bi-trophy</c:when>
                                                        <c:when test="${record.betResult == 'LOSE'}">bi-x-circle-fill</c:when>
                                                        <c:when test="${record.betResult == 'HALF_LOSE'}">bi-x-circle</c:when>
                                                        <c:otherwise>bi-dash-circle</c:otherwise>
                                                    </c:choose>">
                                                </i>
                                                ${record.betResult}
                                            </span>
                                        </c:otherwise>
                                    </c:choose>
                                </td>
                                <td class="text-end">
                                    <div class="btn-group btn-group-sm">
                                        <a href="${pageContext.request.contextPath}/bet/edit/${record.id}" 
                                           class="btn btn-warning" title="编辑">
                                            <i class="bi bi-pencil"></i>
                                        </a>
                                        <c:if test="${empty record.betResult}">
                                            <a href="${pageContext.request.contextPath}/bet/settle/${record.id}" 
                                               class="btn btn-info" title="结算">
                                                <i class="bi bi-check-lg"></i>
                                            </a>
                                            <a href="${pageContext.request.contextPath}/bet/delete/${record.id}" 
                                               class="btn btn-danger"
                                               onclick="return confirm('确定删除?')"
                                               title="删除">
                                                <i class="bi bi-trash"></i>
                                            </a>
                                        </c:if>
                                    </div>
                                </td>
                            </tr>
                        </c:forEach>
                    </tbody>
                </table>
            </div>
        </div>
        
        <!-- 分页 -->
        <nav class="mt-4">
            <ul class="pagination justify-content-center">
                <li class="page-item ${page.current == 1 ? 'disabled' : ''}">
                    <a class="page-link" href="?pageNum=${page.current-1}">
                        <i class="bi bi-chevron-left"></i>
                    </a>
                </li>
                <c:forEach begin="1" end="${page.pages}" var="i">
                    <li class="page-item ${page.current == i ? 'active' : ''}">
                        <a class="page-link" href="?pageNum=${i}">${i}</a>
                    </li>
                </c:forEach>
                <li class="page-item ${page.current == page.pages ? 'disabled' : ''}">
                    <a class="page-link" href="?pageNum=${page.current+1}">
                        <i class="bi bi-chevron-right"></i>
                    </a>
                </li>
            </ul>
        </nav>
    </div>
    
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html> 